.margin{width: 1200px; margin: 0 auto;}
body{background: #f6f6f6;}
header{height: 38px; background: #f6f6f6;}
header .left{float: left; text-align:center;}
header .left li{float: left; font:12px/38px ""; color: #000; padding: 0 10px;}
header .left .welcome{display: none;}
header .left .welcome #logout{ color: red;}
header .left li:nth-child(1) a{color: red;}
header .right{ float: right; text-align: center;}
header .right li{float: left; font:12px/38px ""; color: #000; background: url(../images/h1.png) no-repeat right center; padding: 0 10px;}
header .right li:nth-child(2) a{color: red;}
header .right li.active{background-image: none;}

nav{background: #fff; }
nav .top{display:flex;}
nav .top .logo{height: 52px; width: 210px; margin: 24px 60px 15px 2px; background: url(http://jp.juancdn.com/juanpi/images/total/header-total.gif?20160112) no-repeat; background-position: -75px -387px;}
nav .top .search{margin-top: 30px;}
nav .top .search .tet{ width:350px; height: 35px; padding-left:10px ; border:1px solid #ccc; border-right:0 ; border-radius:5px 0 0 5px;}
nav .top .search .btn{ width:40px; height: 37px; float: right; background: red; border: none; color: #fff;border-radius:0 5px 5px 0;}
nav .top .search p {display: flex;}
nav .top .search p a{display: block; margin: 3px 5px 0 0 ;} 
nav .top .search p a:hover{color: orange;}
nav .top .activity{ }
nav .top .activity ul{display: flex; text-align: center; margin: 30px 0 0 40px;}
nav .top .activity ul li{display: flex; background: url(../images/n3.png) no-repeat right center; padding: 0 10px; font: 14px/36px ""; margin: 0 5px;}
nav .top .activity ul li:last-child{background-image: none;}
nav .top .activity ul li img{width: 40px; height: 37px;}
nav .top .activity ul li span{ margin: 0 5px;}
nav .bottom ul{ display: flex;}
nav .bottom ul li a{display: block; font:300 18px/50px ""; padding: 0 10px; color: #000;}
nav .bottom ul li a:hover{background: #ff464e; color: #fff; border-radius: 5px 5px 0 0;}

#te{background:#ff464e; height: 3px;}

main{background: #fff; padding: top 1   0px; ;}
main .top{font: 14px/48px "";}
main .top span{ color: #999; margin: 0 2px; }
main .center {display: flex; margin-top: 20px; position: relative;}
main .center .box{display: flex;}
main .center .box ul li{ margin:10px 0;}
main .center .goodsMsg{ overflow: hidden;}
main .center .goodsMsg h1{ font:800 18px/40px "";}
main .center .goodsMsg .active{ height: 82px; width: 460px; background: rgba(206, 3, 3, 0.1); padding: 0 0 0 10px;}
main .center .goodsMsg .active p{ float: 12px/32px ""; color: #999;}
main .center .goodsMsg .active span{ font:24px/48px ""; color: red;}
main .center .goodsMsg .active s{ font: 15px/48px ""; color: #999; margin-left: 10px;}
main .center .goodsMsg .active mark{ background: #ffce46; color: #fff;}
main .center .goodsMsg h5{ font-size: 14px; color: #999; padding-left: 15px; margin:40px 0 ; font-weight: 550;}
main .center .goodsMsg .btn{ width: 120px; height: 40px; background: #ff464e; color: #fff; border: 0; margin-left: 90px;}
main .center .goodsMsg .add{ width: 120px; height: 40px; background: #ff464e; color: #fff; border: 0; margin-left: 60px;}
//放大镜
main .clear{display: block;width: 0;height: 0;overflow: hidden;clear: both;}
main .box{width: 1000px;overflow: hidden;height: 424px;display: flex;justify-content: space-between;}
main .magnifier{padding: 10px;position: relative;width: 400px; display: flex;}
main .magnifier .s_box{width:400px;height: 400px;position: relative;}
main .magnifier .s_box img{width: 400px;height: 400px;}
main .magnifier .s_box span{width: 150px;height: 150px;background: rgba(200,200,200,0.4);position: absolute;left:0;top:0;display: none;}
main .magnifier .s_box .mask{width: 400px;height: 400px;position: absolute;left:0;top:0;margin: 0;cursor:move;}
main .magnifier .b_box{width: 400px;height: 400px;overflow: hidden;position: relative;display: none;position: absolute;right: -480px;top:10px;}
main .magnifier .b_box img{width: 1200px;height: 1200px;position: absolute;left:0;top:0;}
main .magnifier .list{margin: 5px 15px 0 10px;padding: 0;list-style: none;}
main .magnifier .list li{float: left;margin: 0 10px;}
main .magnifier .list li img{width: 58px;height: 58px;}

main .xia{ margin-top: 60px;}
main .xia ul{list-style: none;height: 40px;display: flex;background: rgb(224, 222, 222);text-align: center; font: 15px/40px "";}
main .xia li{flex:1;border-left: solid 1px #ccc;border-right: solid 1px #ccc; color: #999;}
main .xia li.active{background:#ff464e; color: #fff;}
main .xia .cont{}
main .xia .cont .cont1{display: block;}
main .xia .cont .cont1 .top{display: flex;}
main .xia .cont .cont1 .top p{font:300 24px/60px ""; padding:20px 0 0 40px;}
main .xia .cont .cont1 .top h5{ flex: 1; border-bottom: 1px solid #ccc; height: 2px;  margin: 45px 20px 0 20px;}
main .xia .cont .cont1 .top img{display: block;  width: 720px; }
main .xia .cont .cont1 .center{ flex-flow: column; padding-left: 100px;}
main .xia .cont .cont1 .center img{  width: 720px; }
main .xia .cont .cont2{display: none;}
main .xia .cont .cont2 .top{ display: flex;}
main .xia .cont .cont2 .top h6{font:300 24px/60px ""; padding:20px 0 0 40px;}
main .xia .cont .cont2 .top h5{ flex: 1; border-bottom: 1px solid #ccc; height: 2px;  margin: 45px 20px 0 20px;}
main .xia .cont .cont2 p{ font: 12px/26px ""; padding-left: 60px;}
main .xia .cont .cont2 p span{ font-weight: 600;}
main .xia .cont .cont2 .img{ margin:20px 0 20px 60px;}
main .xia .cont .cont3{display: none;}
main .xia .cont .cont3 .top{ display: flex;}
main .xia .cont .cont3 .top h6{font:300 24px/60px ""; padding:20px 0 0 40px;}
main .xia .cont .cont3 .top h5{ flex: 1; border-bottom: 1px solid #ccc; height: 2px;  margin: 45px 20px 0 20px;}
main .xia .cont .cont3 dl{ display: flex; margin-left: 40px;}
main .xia .cont .cont3 dl dd{ margin: 40px; background: url(http://jp.juancdn.com/juanpi/images/items/xiaobao.gif?20160125); width: 70px; height: 94px;}
main .xia .cont .cont3 dl dd:nth-child(1){background-position: 0 0}
main .xia .cont .cont3 dl dd:nth-child(2){background-position: -110px 0}
main .xia .cont .cont3 dl dd:nth-child(3){background-position: -222px 0}
main .xia .cont .cont3 dl dd:nth-child(4){background-position: -333px 0}
main .xia .cont .cont3 dl dd:nth-child(5){background-position: -442px 0}
main .xia .cont .cont3 dl dd:nth-child(6){background-position: -554px 0}
main .xia .cont .cont3 dl dd:nth-child(7){background-position: -665px 0}
main .xia .cont .cont3 dl dd:nth-child(1):hover{background-position: 0 -94px}  
main .xia .cont .cont3 dl dd:nth-child(2):hover{background-position: -110px -94px}  
main .xia .cont .cont3 dl dd:nth-child(3):hover{background-position: -222px -94px}  
main .xia .cont .cont3 dl dd:nth-child(4):hover{background-position: -333px -94px}  
main .xia .cont .cont3 dl dd:nth-child(5):hover{background-position: -442px -94px}  
main .xia .cont .cont3 dl dd:nth-child(6):hover{background-position: -554px -94px}  
main .xia .cont .cont3 dl dd:nth-child(7):hover{background-position: -665px -94px}  

footer{ margin-top: 20px;}
footer .active{background:#ff464e; height: 3px;}
footer .margin{padding: 30px 30px 0 40px;box-sizing:border-box;}
footer .top{ display: flex;position: relative; }
footer .top .left{ }
footer .top .left span{ font: 14px/24px "";}
footer .top .center{display: flex;}
footer .top dl{}
footer .top dt{ font-size: 15px; font-weight: 900; margin:0 0 10px 60px;}
footer .top dd{margin:0px 60px; font: 12px/24px "";}
footer .top .right{}
footer .top .right .te{ background: url(http://jp.juancdn.com/juanpi/images/global/service_add.gif?20160113) no-repeat; width: 86px; height: 42px; margin-left: 8px;}
footer .top .right .te a{display:block;width: 86px; height: 42px;}
footer .top .right .te:hover{ background-position: 0 -47px;}
footer .top .right span{ color: rgb(151, 151, 151);}
footer .top .right .a1{ position: absolute; right:18px; top: 8px;}
footer .top .right .a2{ position: absolute; right:5px; top: 25px;}
footer .top .right p{font: 12px/60px ""; color: rgb(151, 151, 151); margin-left: 20px;}
footer .center{}
footer .center p{border-bottom: 1px solid #ccc; font: 13px/40px ""; margin-bottom: 20px;}
footer .center p a{ display: inline; margin-left: 20px;}
footer .center span{float: right;}
footer .xia{}
footer .bottom p{ font:12px/20px ""; color:#ccc;text-align: center;}
footer .bottom ul{display: flex; justify-content: center; margin:10px 0 30px 0;}
footer .bottom ul li{ margin: 0 10px;}






